<script>
var i = 0;
    $(document).ready(function() {
        $('#datepicker').datetimepicker({
		  pickTime: false
		});
		
		$('#adult,#child,#infant').autoNumeric('init', {aSep: '',aDec: ',',vMin: '0',vMax: '999'});
    });

    function formatMoney(money, c, d, t) {
        var n = money,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d === undefined ? "," : d,
                t = t === undefined ? "." : t,
                s = n < 0 ? "-" : "",
                i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
                j = (j = i.length) > 3 ? j % 3 : 0;
        return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    }

    function guestSearch() {
        window.open('<?php echo base_url(); ?>reservation/guestSearch/', '', 'toolbar=no,location=no,menubar=no,scrollbars=yes,width=850,height=500');
    }
	
	function choose_room(){
		window.open('<?php echo base_url();?>reservation/choose_room/','', 'toolbar=no,location=no,menubar=no,scrollbars=yes,width='+(screen.width-10)+',height='+(screen.height-100));
	}

    function roomSearch123(){
        $.post('<?php echo base_url(); ?>reservation/roomSearchAjax/', {
            checkin: $('#date1').val(),
            checkout: $('#date2').val(),
            adult: $('#adult').val(),
            child: $('#child').val(),
            infant: $('#infant').val()
        }, function(data) {
            $('#listRoom').html('');
            $.each(data, function(key, value) {
                $('#listRoom').append('<tr>');
                $('#listRoom').append('<td>' + data[key].room_number + '</td>');
                $('#listRoom').append('<td>' + data[key].room_type_name + '</td>');
				 $('#listRoom').append('<td>' + data[key].room_type_max_adult + '</td>');
				  $('#listRoom').append('<td>' + data[key].room_type_max_child + '</td>');
				   $('#listRoom').append('<td>' + data[key].room_type_max_infant + '</td>');
                $('#listRoom').append('<td>Rp ' + formatMoney(data[key].room_type_price, 2) + '</td>');
                $('#listRoom').append('<td><a href="javascript:void(0)" class="btn btn-primary" onclick="listPrice(' + data[key].room_number + ');">Choose</td>');
                $('#listRoom').append('</tr>');
            });
            $('#modalRoom').modal('show');
        }, 'json');
    }
	
	function roomSearch(){
		$.post('<?php echo base_url(); ?>reservation/roomSearch_model/', {
            checkin: $('#date1').val(),
            checkout: $('#date2').val(),
            adult: $('#adult').val(),
            child: $('#child').val(),
            infant: $('#infant').val()
        });
	}

    function listPrice(rn) {
        $.post('<?php echo base_url(); ?>reservation/roomPriceAjax/', {
            checkin: $('#date1').val(),
            checkout: $('#date2').val(),
            room_number: rn
        }, function(data) {
            $('#listPrice').html('');
            var number = 0;

            for (var d = new Date($('#date1').val()); d < new Date($('#date2').val()); d.setDate(d.getDate() + 1)) {

                var tanggal = d.getFullYear() + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + ("0" + d.getDate()).slice(-2);
                $('#listPrice').append('<tr>');
                $('#listPrice').append('<td class="tgl">' + tanggal + '</td>');
                $('#listPrice').append('<td class="rn">' + data[0].room_number + '</td>');
                $('#listPrice').append('<td>' + data[0].room_type_name + '</td>');

                var hasRate = false;
                var datax = new Array();
                var a = 0;
                $.each(data, function(key, value) {
                    if (value.room_rate_date === tanggal) {
                        hasRate = true;
                        datax[a] = [value.rate_type_id, value.rate_type_name, value.room_rate_price];
                        a++;
                    }
                });

                $('#listPrice').append('<td><select name="rate[]" id="select' + number + '" class="select"></select></td>');
                $('#select' + number).append('<option value="" onclick="changeRate(' + number + ',' + data[0].room_type_price + ')">---</option>');
                $('#listPrice').append('<td id="harga' + number + '" name="harga[]" class="harga">' + data[0].room_type_price + '</td>');

                if (hasRate === true) {
                    $.each(datax, function(key, value) {
                        $('#select' + number).append('<option value="' + value[0] + '" onclick="changeRate(' + number + ',' + value[2] + ');">' + value[1] + '</option>');
                    });
                }

                number++;
            }
            doTotal();
            $('#modalRoom').modal('hide');
        }, 'json');
    }
	
	

    function changeRate(td, price) {
        $('#harga' + td).html(price);
        doTotal();
    }

    function doTotal() {
        var total = 0;
        $('#listPrice .harga').each(function()
        {
            total = parseInt($(this).html()) + total;
        });
        $('.total').html(total);
    }

    /*function post(){ 
	$(".resv").each(function(){
		var r = $(this).val();
		if(i == 0){
			$.post('<?php echo base_url(); ?>reservation/save/',{
				guest_id: $("#guest_id").val(),
				//status: $("#status").val(),
				//checkin: $('#date1').val(),
				//checkout: $('#date2').val(),
				adult: $('#adult').val(),
				child: $('#child').val(),
				infant: $('#infant').val(),
				//rate_type: rt,
				//tanggal: tgl,
				resv_type: $('#resv_type').val(),
				resv_id: r,
				i: i++
				//price: prc
				
			
			});
		} else {
			$.post('<?php echo base_url(); ?>reservation/update_resv/',{
				resv_id: r,
				i: i++
				//price: prc
				
				
			
			});
		
			}
		
		});
		
		
    }*/
</script>

<form action="<?php echo base_url().'reservation/save/'?>" method="post">
    <table class="table table-hover table-condensed">
        <tr>
            <td>Guest</td>
            <td>
				<input type="hidden" id="guest_id" name="guest_id" class="input">
				<div class="input-append">
					<input type="text" id="guest_name" name="guest_name" class="input" disabled> 
					<a class="btn btn-primary" onclick="guestSearch()" ><i class="icon-search icon-white"></i></a>
				</div>
			</td>
        </tr>
        <!--<tr>
            <td>Status</td>
            <td>
                <select name="status" id="status">
                    <option value="4">Booking</option>
                    <option value="3">Check In</option>
                </select> 
            </td>
        </tr>-->
        <tr>
            <td>Total Adult</td>
            <td><input id="adult" type="text" name="adult"></td>
        </tr>
        <tr>
            <td>Total Child</td>
            <td><input id="child" type="text" name="child"></td>
        </tr>
        <tr>
            <td>Total Infant</td>
            <td><input id="infant" type="text" name="infant"></td>
        </tr>
		<tr>
            <td>Reservation Type</td>
            <td>
                <select name="resv_type" id="resv_type">
                    <option value="Individual">Individual</option>
                    <option value="Group">Group</option>
                </select> 
            </td>
        </tr>
        <tr>
            <td>Search Room</td>
			<td>
					<!--<input id="time" class="input" name="time" type="text" data-format="yyyy-MM-dd" placeholder="yyyy-mm-dd" title="Pilih tanggal">
					<span class="add-on" style="cursor:pointer;">
					  <i data-time-icon="icon-time" data-date-icon="icon-calendar">
					  </i>
					</span>-->
					<a href="#" class="btn btn-primary" title="Search room" onclick="choose_room();"><i class="icon-search icon-white"></i></a>
			</td>
			
		</tr>
		<tr>
			<td>Room Ordered List</td>
			<td>
			<table>
				<thead>
					<th>Reservation Status</th>
					<th>Date</th>
					<th style="display:none;"></th>
					<th style="display:none;"></th>
					<th>Room Number</th>
					<th style="display:none;"></th>
					<th>Room Type</th>
					<th>Rate Type</th>
					<th>Room Price</th>
				</thead>
				<tbody id="ord_Room">
				
				</tbody>
			</table>
			
			</td>
		</tr>
	<!--<input type="submit" value="Simpan" class="btn btn-primary" >-->
	
    </table>
	<input type="submit" value="Save" onclick="post();" class="btn btn-primary">    
</form>

<div id="modalSearchRoom" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;width: initial;margin-left: -360px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">Available Room</h3>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">			
			<div class="control-group">
			<table>
				<thead>
					<th></th>
					<th>Status Reservation</th>
					<th></th>
					<th>Room Number</th>
					<th>Room Type</th>
					<th>Room Price</th>
					<th>Rate Type</th>
					<th>Rate price</th>
					<th></th>
					<th></th>
				</thead>
				<tbody id="roomAvailable">
				
				</tbody>
			</table>
			</div>
		</div>
		
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>
</div>

<script>
var room_ord = 0;
var rate = 0;
var room = 0;
	/*function add_room(){
		var id_room=0;
		for(var i=0;i<$('#add-more').val();i++){
		
			id_room++;
			var room = '<tr id="room-'+id_room+' ">';
			room += '<td width="50"><input id="time-'+id_room+'" name="time" placeholder="dd-MM-yyyy hh:mm:ss"></td>';
			room += '<td width="30"><a class="btn btn-primary" title="Search room" onclick="search_room('+id_room+')"><i class="icon-search icon-white"></i></a></td>';
			room +='</tr>';
			
			$('#list-room').append(room);

			}
	
		}*/
	
	/*function list_room(rate_id, tanggal, room_type){
		$.post('<?php echo base_url(); ?>reservation/orderedRoom/', {
            tanggal: $('#tanggal').val(),
			status: $('#statusord').val(),
            room_id: $('#room_id_ord').val(),
            room_numb: $('#room_numb_ord').text(),
            type: $('#room_type_ord').text(),
            price: $('#room_price_ord').text(),
			rate_type: $('#rate_name'+rate_id+'').text(),
			rate_price: $('#rate_price'+rate_id+'').text(),
			rate_id: $('#rate_id'+rate_id+'').text()
        }, function(data){
			room_ord++;
			var ordroom = '<tr id="room-'+room_ord+'">';
			ordroom += '<td width="50"><input id="resv_id" name="resv_id" type="hidden" class="resv_id" value=" '+data['resv_room_id']+' " ></td>';
			ordroom += '<td width="50" id="resv_status" name="resv_status">'+data['resv_status']+'</td>';
			ordroom += '<td width="50" name="room_numb" id="room_numb">' + data['room_number']+ '</td>';
			ordroom += '<td width="50" id="room_type" name="room_type">'+$('#room_type_ord').text()+'</td>';
			ordroom += '<td width="50" id="room_price" name="room_price" >'+data['price']+'</td>';
			ordroom += '<td><a class="btn btn-warning" title="cancel room" onclick="cancel(resv_id, room_numb, '+room_ord+')");"><i class="icon-remove icon-white"></i></a></td>';
			ordroom +='</tr>';
			
			//alert(ordroom);
			$('#ord_Room').append(ordroom);
			
			$('#ord_Room').html('');
				$('#ord_Room').append('<tr id="listRoomOrd">');
				$('#ord_Room').append('<td width="50" id="resv_id" name="resv_id">'+data[key].resv_room_id+'</td>');
				$('#ord_Room').append('<td width="50" id="resv_status" name="resv_status">'+data[key].resv_status+'</td>');
				$('#ord_Room').append('<td width="50" name="room_numb" id="room_numb">' + data[key].room_number + '</td>');
				$('#ord_Room').append('<td width="50" id="room_type" name="room_type">'+room_type+'</td>');
				$('#ord_Room').append('<td width="50" id="room_price" name="room_price" >'+data[key].price+'</td>');
				$('#ord_Room').append('</tr>');
				
				$('#modalSearchRoom').modal('hide');
				
			},'json');
	}*/
	
	
	/*function search_room(id){
		if($('#time').val() == ''){
			$('#time').focus();
			return false;
		}
		$('#roomAvailable').empty();
        $.post('<?php echo base_url(); ?>reservation/roomSearch_model/', {
            date: $('#time').val()
        }, function(data){
            
            $.each(data['room'], function(key, value) {
				var room_t_id = data['room'][key].room_type_id;
                var room_avail = '<tr>';
					room_avail += '<td><input name="tanggal" id="tanggal" value=" '+$('#time').val()+' " type="hidden"></td>';
					room_avail += '<td><select name="statusord" id="statusord"><option value="Booked">Booking</option><option value="Check In">Check In</option><option value="Check Out">Check Out</option><option value="Out Of Order">Out Of Order</option></select></td>';
					room_avail += '<td ><input id="room_id_ord" name="room_id_ord" value=" '+data['room'][key].room_id+' " type="hidden"></td>';
					room_avail += '<td name="room_numb_ord" id="room_numb_ord">' + data['room'][key].room_number + '</td>';
					room_avail += '<td name="room_type_ord" id="room_type_ord">' + data['room'][key].room_type_name + '</td>';
					room_avail += '<td name="room_price_ord" id="room_price_ord">' + data['room'][key].room_type_price + '</td>';
					room_avail += '<td><select name="rate_id" id="rate_id">';
				$.each(data['rate'], function(key, value) {
					var rate_t_id = data['rate'][key].room_type_id;
					rate++;
					if(room_t_id == rate_t_id) {
					room_avail += '<option value="'+data['rate'][key].rate_type_id+'">'+data['rate'][key].rate_type_name+'</option>';
					
					//$('#roomAvailable').append('<td name="rate_id'+rate+'" id="rate_id'+rate+'" style="display:none">' +data['rate'][key].rate_type_id + '</td>'); 
					//$('#roomAvailable').append('<td name="rate_id" id="rate_id">' +data['rate'][key].room_type_id + '</td>'); 
					//$('#roomAvailable').append('<td name="rate_name'+rate+'" id="rate_name'+rate+'">' +data['rate'][key].rate_type_name + '</td>'); 
					
					} else {
					room_avail +='<option value=""></option>';
					}
				});
				room_avail += '</select></td>';
				room_avail += '<td name="" id=""></td>';
                room_avail += '<td><a href="javascript:void(0)" class="btn btn-primary" onclick="list_room('+rate+', tanggal, room_type_ord)">Choose</td>';
                room_avail += '</tr>';
				
				$('#roomAvailable').append(room_avail);
            });
			
            $('#modalSearchRoom').modal('show');
        }, 'json');
    }*/
	
	function choose_rooms(room_id, date) {
		
			//alert($(this).children('[name="room_id"]').val());
			//alert($(this).children('[name="date"]').val());
			
			$.post('<?php echo base_url(); ?>reservation/choose_room_model/',{
				room_id: room_id,
				date: date
			}, 
			function(data){
            $.each(data['room'], function(key, value) {
				room++;
				var room_t_id = data['room'][key].room_type_id;
                var room_avail = '<tr id="room-'+room+'" >';
					room_avail += '<td><select name="statusord[]" id="statusord-'+room+'" style="width:120px;"><option value="Booked">Booking</option>';
					if(data['room'][key].resv_room_date > data['now']){
					
					} else {
					room_avail += '<option value="Check In">Check In</option></select></td>';
					}
					room_avail += '<td><input type="text" name="date[]" id="date-'+room+'" value="'+data['room'][key].resv_room_date+'" style="width:80px;" disabled></td>';
					room_avail += '<td width="50" style="display:none;"><input id="resv_room_id-'+room+'" name="resv_room_id[]" class="resv" value=" '+data['room'][key].resv_room_id+' " style="display:none"></td>';
					room_avail += '<td style="display:none;"><input id="room_id_ord-'+room+'" name="room_id_ord[]" value=" '+data['room'][key].room_id+' " style="display:none"></td>';
					room_avail += '<td ><input type="text" name="room_numb_ord[]" id="room_numb_ord-'+room+'" value="'+data['room'][key].room_number+'" disabled style="width:50px;"></td>';
					room_avail += '<td style="display:none;"><input name="room_type_id[]" id="room_type_id-'+room+'" value="'+room_t_id+'" style="display:none"></td>';
					room_avail += '<td name="room_type_ord[]" id="room_type_ord-'+room+'">' + data['room'][key].room_type_name + '</td>';
					//room_avail += '<td name="room_price_ord[]" id="room_price_ord-'+room+'">' + data['room'][key].room_type_price + '</td>';
					room_avail += '<td><input type="hidden" name="room_price_ord[]" id="room_price_ord-'+room+'" value="'+data['room'][key].room_type_price+'"><select name="rate[]" id="rate-'+room+'" onchange="select_rate_price('+room+')"><option value="0">--Standard Rate--</option>';
				$.each(data['rate'], function(key, value) {
					//var rate_t_id = data['rate'][key].room_type_id;
					
					//if(room_t_id == rate_t_id) {
					
					room_avail += '<option value="'+data['rate'][key].rate_type_id+'">'+data['rate'][key].rate_type_name+'</option>';
					
					//$('#roomAvailable').append('<td name="rate_id'+rate+'" id="rate_id'+rate+'" style="display:none">' +data['rate'][key].rate_type_id + '</td>'); 
					//$('#roomAvailable').append('<td name="rate_id" id="rate_id">' +data['rate'][key].room_type_id + '</td>'); 
					//$('#roomAvailable').append('<td name="rate_name'+rate+'" id="rate_name'+rate+'">' +data['rate'][key].rate_type_name + '</td>'); 
					
				//	} else {
					//room_avail +='<option disabled></option>';
					//}
				});
				room_avail += '</select></td>';
				room_avail += '<td name="rate_price" id="rate_price-'+room+'"><input type="text" name="rate_price2[]" value="'+data['room'][key].room_type_price+'" disabled style="width:150px;"></td>';
				room_avail += '<td><a class="btn btn-warning" title="cancel room" onclick="cancel('+room+')");"><i class="icon-remove icon-white"></i></a></td>';
                room_avail += '</tr>';
				//alert(room_avail);
				$('#ord_Room').append(room_avail);
            });
			
				
        }, 'json');
		
		
   }
   
   function select_rate_price(row){
	$('#rate_price-'+row).empty();
	if($('#rate-'+row).val() == 0){
		var val = '<input type="text" name="rate_price2[]" value="'+$('#room_price_ord-'+row).val()+'" disabled style="width:150px;">';
					$('#rate_price-'+row).append(val);
	} else {
		$.post('<?php echo base_url(); ?>reservation/select_rate/',{		
				rate_id: $('#rate-'+row).val(),
				date: $('#date-'+row).val(),
				room_type_id: $('#room_type_id-'+row).val()
			}, function(data){
					//alert($('#room_price_ord-'+row).text());
					/*if(data.length==0){
					var val = '<input value="'+$('#room_price_ord-'+row).text()+'">';
					$('#rate_price-'+row).append(val);
					} else{*/
					var val = '<input type="text" name="rate_price2[]" value="'+data['room_rate_price']+'" disabled style="width:150px;">';
					$('#rate_price-'+row).append(val);
					//}
				}, 'json');
		}
   }
   
   function cancel(row){
		$.post('<?php echo base_url(); ?>reservation/cancelRoom/', {
            resv_id: $('#resv_room_id-'+row).val()
        });
		$('#room-'+row).remove();
	}
	
	function post(e) {
	
	if($('#guest_name').val() == '') {
		alert('Please choose guest first.');
		event.preventDefault();
		return false;
	}
	
	if($('#ord_Room tr').length == 0){
		alert('Please choose room first.');
		event.preventDefault();
		return false;
	}
	
	var a=window.confirm('Are you sure that you want to proccess this reservation?');
	if(!a) {
		event.preventDefault();
		return false;
	} else {
		$('input').removeAttr('disabled');
	}
	
}
	
	
</script>